<template>
	<view>
		<swiper class="home-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="banner in banners" :key="banner.id">
				<image :src="banner.picUrl" mode="scaleToFill"></image>
			</swiper-item>
		</swiper>
		<!-- 宫格导航 -->
		<uni-grid :column="4">
			<uni-grid-item v-for="cate in cates" :key="cate.id">
				<view class="grid-item">
					<image :src="cate.icon" mode="scaleToFill"></image>
					<text class="icon-name">
						{{cate.name}}
					</text>
				</view>
			</uni-grid-item>
		</uni-grid>
		<!-- /宫格导航 -->
		<!-- 推荐商品列表 -->
		<view class="items">
			<view class="item" v-for="item in items" :key="item.id" @tap="enterDetail(item.id)">
				<image :src="item.pic" mode="scaleToFill"></image>
				<view class="item-info">
					<text class="name">{{item.name}}</text>
					<text class="price">
						{{item.minPrice}}
					</text>
				</view>
			</view>
			{{ finished?'我也是有底线的':'加载...' }}
		</view>
		<!-- /推荐商品列表 -->
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				banners: [],
				cates: [],
				items: [],
				page: 1,
				pageSize: 5,
				loading: false,
				finished: false
			};
		},
		onLoad(){
			this.fetchBanners()
			this.fetchCates()
			this.fetchItems()
		},
		methods: {
			enterDetail(id){
				uni.navigateTo({
					url: '/pages/detail/detail?id='+id
				})
			},
			fetchBanners() {
				this.$request('/banner/list').then(res=> {
					if (res.data.code === 0) {
						this.banners = res.data.data
					}
				})
			},
			fetchCates(){
				this.$request('/shop/goods/category/all').then(res => {
					if (res.data.code === 0) {
						this.cates = res.data.data
					}
				})
			},
			fetchItems(){
				this.loading = true;
				this.$request('/shop/goods/list/v2', {
					method: 'POST',
					data: {
						page: this.page,
						pageSize: this.pageSize
					}
				}).then(res => {
					uni.stopPullDownRefresh()
					this.loading = false;
					if (res.data.code ===0) {
						this.items = [
							...this.items,
							...res.data.data.result
						]
					}
					if (res.data.code === 700) {
						this.finished = true;
					}
				})
			}
		},
		onReachBottom(){
			if (!this.loading && !this.finished) {
				this.page++;
				this.fetchItems();
			}
		},
		onPullDownRefresh() {
			// 重置
			this.page = 1;
			this.items = [];
			this.finished = false;
			this.fetchItems()
		}
	}
</script>

<style scoped lang="scss">
.home-swiper{
	width: 750rpx;
	height: 375rpx;
	image{
		width: 750rpx;
		height: 375rpx;
	}
}
.grid-item{
	width: 100%;
	height: 100%;
	font-size: 12px;
	color: #333;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	image{
		width: 100rpx;
		height:100rpx;
	}
}

.item{
	display: flex;
	image{
		width: 150px;
		height: 150px;
	}
	.item-info{
		flex: 1
	}
}
</style>
